<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            background: #fff;
            padding: 20px;
            margin: 20px auto;
            width: 82%;
            border-color: #e8f3ec;
            border-bottom: 9px solid #E7EFF1;
            box-shadow: 1px 0px 5px rgba(100, 100, 100, 0.3);
        }

        ul {
            list-style: none;
        }

        ul > li {
            width: 80%;
            height: 30px;
            line-height: 30px;
        }

        .lii {
            background-color: red;
        }

    </style>
</head>
<body>
<div class="js3">
    <div class="js3-1">
        1、算术计算
        <div class="add">
            <input class="inp1" type="text">
            加
            <input class="inp11" type="text">
            <button class="btn1">求和</button>
        </div>
        <div>
            <input class="inp1" type="text">
            减
            <input class="inp11" type="text">
            <button class="btn1">求差</button>
        </div>
        <div>
            <input class="inp1" type="text">
            乘
            <input class="inp11" type="text">
            <button class="btn1">求积</button>
        </div>
        <div>
            <input class="inp1" type="text">
            除
            <input class="inp11" type="text">
            <button class="btn1">求商</button>
        </div>
        <div>
            <input class="inp1" type="text">
            模
            <input class="inp11" type="text">
            <button class="btn1">求模</button>
        </div>
    </div>
    <div class="js3-2">
        2、隔行换色
        <button class="btn-2">执行变色</button>
        <ul class="list">
            <li class="list-item">隔行变色</li>
            <li class="list-item">隔行变色</li>
            <li class="list-item">隔行变色</li>
            <li class="list-item">隔行变色</li>
            <li class="list-item">隔行变色</li>
        </ul>
    </div>
    <div class="js3-3">
        3、求商取模秒转时间
        <input type="text" placeholder="单位（秒）">
        <button>秒转时间</button>
    </div>
    <div class="js3-4">
    4、是否是两位数
        <input type="text" placeholder="输入数字">
        <button>判断</button>
    </div>
</div>
<script>
    window.onload = function () {
        var div1 = document.getElementsByClassName("js3-1")[0];
        var inputs = div1.getElementsByTagName("input");
        var btn = div1.getElementsByTagName("button");
        btn[0].onclick = function () {
            var a = inputs[0].value;
            var b = inputs[1].value;
            if (a == "" || b == "" || isNaN(a) || isNaN(b)) {//判断是否为空或非数字
                alert("输入有误，请重新输入")
            }
            else {
                alert(parseInt(a) + parseInt(b));
            }
        }
        btn[1].onclick = function () {
            var a = inputs[2].value;
            var b = inputs[3].value;
            if (a == "" || b == "" || isNaN(a) || isNaN(b)) {//判断是否为空或非数字
                alert("输入有误，请重新输入")
            }
            else {
                alert(a - b);
            }
        }
        btn[2].onclick = function () {
            var a = inputs[4].value;
            var b = inputs[5].value;
            if (a == "" || b == "" || isNaN(a) || isNaN(b)) {//判断是否为空或非数字
                alert("输入有误，请重新输入")
            }
            else {
                alert(a * b);
            }
        }
        btn[3].onclick = function () {
            var a = inputs[6].value;
            var b = inputs[7].value;
            if (a == "" || b == "" || isNaN(a) || isNaN(b)) {//判断是否为空或非数字
                alert("输入有误，请重新输入")
            }
            else {
                alert(a / b);
            }
        }
        btn[4].onclick = function () {
            var a = inputs[8].value;
            var b = inputs[9].value;
            if (a == "" || b == "" || isNaN(a) || isNaN(b)) {//判断是否为空或非数字
                alert("输入有误，请重新输入")
            }
            else {
                alert(a % b);
            }
        }
        var div2 = document.getElementsByClassName("js3-2")[0];
        var btn2 = div2.getElementsByTagName("button");
        var li2 = div2.getElementsByTagName("li");
        btn2[0].onclick = function () {
            for (var i = 0; i < li2.length; i++) {
                if (i % 2 == 0) {
                    li2[i].style.background = "blue";
                }
                else {
                    li2[i].style.background = "red";
                }
            }
        }
        var div3 = document.getElementsByClassName("js3-3")[0];
        var inp3=div3.getElementsByTagName("input")[0];
        var btn3=div3.getElementsByTagName("button")[0];
        btn3.onclick=function () {
            var n=inp3.value;
            var x=n%3600;
            if (n==""||isNaN(n)){
                alert("输入不符合格式，请重新输入");
            }
            else {
                if (n>=3600){
                   alert(parseInt(n/3600)+"时"+x/60+"分"+x%60+"秒");
                } else {
                    alert(parseInt(n/60)+"分"+n%60+"秒");
                }

            }
        }

        var div4 = document.getElementsByClassName("js3-4")[0];
        var inp4=div4.getElementsByTagName("input")[0];
        var btn4=div4.getElementsByTagName("button")[0];
        btn4.onclick=function () {
            var z=inp4.value;
            if (z==""||isNaN(z)){
                alert("输入不符合格式，请重新输入");
            }
            else {
                if (z>9&&z<100){
                    alert("这是两位数哦ovo");
                }
                else {
                    alert("不是两位数哦ovo");
                }
            }
        }

    }
</script>
</body>
</html>